<html jwcid="@Shell" stylesheet="asset:globalStylesheet" title="Browse segments" >
<link jwcid="@If" condition="false" href="orekastyle.css" rel="stylesheet" type="text/css"/>
<body jwcid="@Body">
<table width="99%" border="0" align="center" cellpadding="0" cellspacing="0">
	<tr>
		<td colspan="2"><span jwcid="@my:MainMenu" pageName="RecSegments">Here goes the main menu</span></td>
	</tr>
	<tr>
		<td class="criteria">
			<form jwcid="@Form" listener="ognl:listeners.formSubmit">
				<table cellpadding="4" class="inputform">
					<tr>
						<td>&nbsp;</td>
					</tr>
					<span jwcid="@If" condition="ognl:recSegmentFilter.minDurationError != null">
						<tr>
							<td class="error"><span jwcid="@Insert" value="ognl:recSegmentFilter.minDurationError">error in this field</span></td>
						</tr>
					</span>
					<tr>
				   		<td>Min Duration</td>
				   		<td><input jwcid="@TextField" value="ognl:recSegmentFilter.minDuration" translator="translator:string" size="12" class="ognl:recSegmentFilter.minDurationError==null ? recSegmentFilter.okStyle : recSegmentFilter.errorStyle"/></td>
					</tr>
					<span jwcid="@If" condition="ognl:recSegmentFilter.maxDurationError != null">
						<tr>
							<td class="error"><span jwcid="@Insert" value="ognl:recSegmentFilter.maxDurationError">error in this field</span></td>
						</tr>
					</span>
					<tr>
				   		<td>Max Duration</td>
				   		<td><input jwcid="@TextField" value="ognl:recSegmentFilter.maxDuration" translator="translator:string" size="12" class="ognl:recSegmentFilter.maxDurationError==null ? recSegmentFilter.okStyle : recSegmentFilter.errorStyle"/></td>
					</tr>
	  				<tr jwcid="@If" condition="ognl:recSegmentFilter.localPartyError != null">
						<td class="error"><span jwcid="@Insert" value="ognl:recSegmentFilter.localPartyError">error in this field</span></td>
					</tr>
					<tr>
			   			<td><span key="LocalParty">Local Party</span></td>
			   			<td><input jwcid="@TextField" value="ognl:recSegmentFilter.localParty" translator="translator:string" size="12" class="ognl:recSegmentFilter.localPartyError==null ? recSegmentFilter.okStyle : recSegmentFilter.errorStyle"/></td>
					</tr>
	  				<tr jwcid="@If" condition="ognl:recSegmentFilter.remotePartyError != null">
						<td class="error"><span jwcid="@Insert" value="ognl:recSegmentFilter.remotePartyError">error in this field</span></td>
					</tr>
					<tr>
			   			<td><span key="RemoteParty">Remote Party</span></td>
			   			<td><input jwcid="@TextField" value="ognl:recSegmentFilter.remoteParty" translator="translator:string" size="12" class="ognl:recSegmentFilter.remotePartyError==null ? recSegmentFilter.okStyle : recSegmentFilter.errorStyle"/></td>
					</tr>
				 	<tr>
				 		<td>Start Date</td> 
				 		<td><span jwcid="@DatePicker" value="ognl:recSegmentFilter.startDate" translator="translator:date,pattern=yyyy-MM-dd HH:mm:ss" disabled="false" icon="asset:cal"/></td>
				 	</tr>
				 	<tr>
				 		<td>End Date</td> 
				 		<td><span jwcid="@DatePicker" value="ognl:recSegmentFilter.endDate" translator="translator:date,pattern=yyyy-MM-dd HH:mm:ss" icon="asset:cal"/></td>
				 	</tr>
				  	<tr>
				  		<td colspan="2">
							<span jwcid="direction@RadioGroup" selected="ognl:recSegmentFilter.direction" displayName="Direction" validators="validators:required">
								<!--<input type="radio" jwcid="@Radio" value="ognl:@net.sf.oreka.Direction@UNKN"> Unkn </input>-->
								Outgoing <input type="radio" jwcid="@Radio" value="ognl:@net.sf.oreka.Direction@OUT"> Out </input>
								Incoming<input type="radio" jwcid="@Radio" value="ognl:@net.sf.oreka.Direction@IN"> In </input>
								Both <input type="radio" jwcid="@Radio" value="ognl:@net.sf.oreka.Direction@ALL"> Both </input>
							</span>
 						</td>
				  	</tr>
				  	<tr align="Left">
				   		<td colspan="2"><input id="submitbutton" type="submit" value="Search"/></td>
				  	</tr>
				  	<tr>
				  		<td colspan="2">

							<audio id="player" controls>
								Your browser does not support the audio element.
							</audio>

						</td>
				  	</tr>
				</table>
			</form>
		</td>
		<!-- *** Results table *** -->
		<span jwcid="@If" condition="ognl:!items.isEmpty">
			<td class="results">
				<table>
					<tr>
						<td><span jwcid="mytablepaging">Paging goes here</span></td>
					</tr>
					<tr>
						<td>
							<table>
								<tr>
									<td>
										<table>
											<span jwcid="mytableheader"></span>
											<tr jwcid="segments" class="even">
											    <td><span jwcid="@Insert" value="ognl:item.recSegment.timestamp">timestamp</span></td>
											    <td><span jwcid="@Insert" value="ognl:item.recSegment.duration">duration</span></td>
											    <td><span jwcid="@Insert" value="ognl:item.recSegment.localParty">local party</span></td>
											    <td align="center">
											    	<!--<span jwcid="@Insert" value="ognl:item.recSegment.direction">direction</span>-->
											    	<span jwcid="@If" condition="ognl:item.recSegment.direction == @net.sf.oreka.Direction@IN"><img src="images/common/icon_incomingcall.gif" alt="In"></span>
											    	<span jwcid="@If" condition="ognl:item.recSegment.direction == @net.sf.oreka.Direction@OUT"><img src="images/common/icon_outgoingcall.gif" alt="Out"></span>
											    </td>
											    <td><span jwcid="@Insert" value="ognl:item.recSegment.remoteParty">remote party</span></td>
											    <td>
											    	<span jwcid="@If" condition="ognl:item.recSegment.tape != null">
											      		<span jwcid="@Insert" value="ognl:item.recSegment.tape.id">tape id</span>
											      	</span>
											    </td>
											    <td>
											    	<span jwcid="@If" condition="ognl:item.recSegment.tape != null">
											      		<a jwcid="@Any" class="play-button" href="#" data-path="ognl:item.recSegment.tape.filename"><img jwcid="@Image" image="asset:play" alt="Play"/></a>
											      	</span>											    
											    </td>
											</tr>
										</table>
									</td>
								</tr>
							</table>
						</td>
					</tr>
					<tr>
						<td><span jwcid="mytablepaging2">Paging goes here</span></td>
					</tr>
					
					
					<!--<tr>	### Not sure where to put this
						<td valign="top">
							<table width="100%" border="0" cellspacing="0" cellpadding="0">
					  			<tr>
					    			<td width="7"><img src="images/common/bdr1_results.gif" width="7" height="24"></td>
					    			<td class="brd4result">&nbsp;</td>
					    			<td width="31"><img src="images/common/bdr4_results.gif" width="23" height="24"></td>
					  			</tr>
							</table>
						</td>
					</tr>-->
					
					
				</table>
			</td>
		</span>
		<span jwcid="@If" condition="ognl:items.isEmpty">
			<td valign="top">
				<span key="NoResults">No results</span>
			</td>
		</span>
		<td width="15" valign="top" class="brdr6results"><img src="images/common/bdr2_results.gif" width="8" height="8"></td>		
	</tr>
</table>
<script
		src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
		integrity="sha256-pasqAKBDmFT4eHoN2ndd6lN370kFiGUFyTiUHWhU7k8="
		crossorigin="anonymous"></script>

<script type="text/javascript">

function playStream(url) {
   var player = document.getElementById('player');
   player.src = url;
   player.play();
}

$(document).ready(function() {
    $("a.play-button").on("click", function(event){
		event.preventDefault();
        playStream( "/orkweb/stream/" + $(this).data('path'));
        return false;
    });
});

</script>
</body>
</html>